<html>

<head>
  <title>IPFS Viewer</title>
  <style>
    @media (prefers-color-scheme: dark) {

      a,
      body {
        background: #000;
        color: white;
      }
    }

    @media (prefers-color-scheme: light) {

      a,
      body {
        background: white;
        color: #000;
      }
    }


    body {
      font-family: -apple-system, BlinkMacSystemFont,
        'avenir next', avenir,
        'helvetica neue', helvetica,
        ubuntu,
        roboto, noto,
        'segoe ui', arial,
        sans-serif;
    }

    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .dt {
      display: table;
    }

    .dtc {
      display: table-cell;
    }

    .fw6 {
      font-weight: 600;
    }

    .vh-100 {
      height: 100vh;
    }

    .w-100 {
      width: 100%;
    }

    .white {
      color: #fff;
    }

    .bg-dark-pink {
      background-color: #d5008f;
    }

    .ph3 {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .tc {
      text-align: center;
    }

    .f6 {
      font-size: .875rem;
    }

    .v-mid {
      vertical-align: middle;
    }

    @media screen and (min-width: 30em) and (max-width: 60em) {
      .f2-m {
        font-size: 2.25rem;
      }
    }

    @media screen and (min-width: 60em) {
      .ph4-l {
        padding-left: 2rem;
        padding-right: 2rem;
      }

      .f-subheadline-l {
        font-size: 5rem;
      }
    }
  </style>
  <script src="/main.js"></script>
</head>

<body>
  <article class="vh-100 dt w-100">
    <div class="dtc v-mid tc ph3 ph4-l">
      <h1 class="f6 f2-m f-subheadline-l fw6 tc">Load content by adding IPFS path to the URL ⤴</h2>
        <p>Something like <a
            href="/ipfs/bafybeicqzoixu6ivztffjy4bktwxy6lxaxkvnavkya7kfgwyhx4bund2ga/">/ipfs/bafybeicqzoixu6ivztffjy4bktwxy6lxaxkvnavkya7kfgwyhx4bund2ga/</a>
        </p>
    </div>
    </center>
</body>

</html>
